body,
section,
span {
  margin: 0;
  padding: 0;
}
body {
  font-family: "微软雅黑";
}
section {
  width: 100%;
  height: 100%;
}
.bgColor {
  background: #2d4081;
}
section.sectionIn .main_page1 .rocket {
  animation: rocket 1s;
  -webkit-animation: rocket 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  opacity: 1;
}
section.sectionIn .main_page1 .thanks {
  animation: thanks 1s;
  -webkit-animation: thanks 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
section.sectionIn .main_page1 .miaov {
  animation: miaov 1s;
  -webkit-animation: miaov 1s;
  animation-delay: 1s ;
  -webkit-animation-delay: 1s ;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
section.sectionOut .main_page1 .rocket {
  animation: rocketOut 1s;
  -webkit-animation: rocketOut 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  opacity: 1;
}
section.sectionOut .main_page1 .thanks {
  animation: thanksOut 1s;
  -webkit-animation: thanksOut 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
section.sectionOut .main_page1 .miaov {
  animation: miaovOut 1s;
  -webkit-animation: miaovOut 1s;
  animation-delay: 1s ;
  -webkit-animation-delay: 1s ;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
section.sectionOut .Bg_page1 {
  animation: circleOut 1s;
  -webkit-animation: circleOut 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
section.sectionOut .bg_start {
  animation: startOut 1s;
  -webkit-animation: startOut 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.main_page1 {
  width: 10.725rem;
  height: 10.725rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5.35rem;
  margin-top: -5.35rem;
}
.main_page1 .rocket {
  width: 5.275rem;
  height: 5.775rem;
  position: absolute;
  top: -0.75rem;
  left: 0;
  background: url(../img/flay.png) no-repeat;
  background-size: cover;
  opacity: 0;
}
.main_page1 .thanks {
  width: 9.975rem;
  height: 7.45rem;
  position: absolute;
  top: 1.5rem;
  left: 0.95rem;
  background: url(../img/thanks.png) no-repeat;
  background-size: cover;
  opacity: 0;
}
.main_page1 .miaov {
  width: 4.775rem;
  height: 2.25rem;
  position: absolute;
  top: 0.175rem;
  left: 5rem;
  background: url(../img/name.png) no-repeat;
  background-size: cover;
  opacity: 0;
}
.Bg_page1 {
  width: 10.475rem;
  height: 10.725rem;
  border: 1px solid #1f2b57;
  background: #233264;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5.35rem;
  margin-top: -5.35rem;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 2.825rem #283972, 0px 0px 0px 2.85rem #223161, 0px 0px 0px 4.825rem #2a3d79, 0px 0px 0px 4.85rem #273971, 0px 0px 0px 6.35rem #2c3f7e, 0px 0px 0px 6.375rem #2a3c79;
}
.bg_start {
  width: 100%;
  height: 100%;
  background: url(../img/bg.png) no-repeat;
  background-size: cover;
  position: absolute;
}
.arrow {
  width: 2.275rem;
  height: 1.625rem;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  margin-left: -1.125rem;
  background: url(../img/top.png) no-repeat;
  background-size: cover ;
  animation: arrow 1s;
  -webkit-animation: arrow 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@keyframes rocket {
  0% {
    transform: translateX(-5rem) translateY(5rem);
  }
}
@-webkit-keyframes rocket {
  100% {
    transform: translateX(5rem) translateY(-5rem);
  }
}
@keyframes rocketOut {
  100% {
    transform: translateX(5rem) translateY(-5rem);
    opacity: 0;
  }
}
@-webkit-keyframes rocketOut {
  0% {
    transform: translateX(-5rem) translateY(5rem);
    opacity: 0;
  }
}
@keyframes miaov {
  0% {
    transform: translateX(-4.775rem) translateY(0.5rem);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes miaov {
  0% {
    transform: translateX(-4.775rem) translateY(0.5rem);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes miaovOut {
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes miaovOut {
  100% {
    opacity: 0;
  }
}
@keyframes thanks {
  0% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes thanks {
  0% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes thanksOut {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
}
@-webkit-keyframes thanksOut {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
}
@keyframes circleOut {
  100% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
}
@-webkit-keyframes circleOut {
  100% {
    transform: translateY(2.5rem);
    opacity: 0;
  }
}
@keyframes startOut {
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes startOut {
  100% {
    opacity: 0;
  }
}
@keyframes arrow {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-1.25rem);
    opacity: 0;
  }
}
@-webkit-keyframes arrow {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-1.25rem);
    opacity: 0;
  }
}
.music {
  width: 1.25rem;
  height: 1.175rem;
  position: absolute;
  right: 0.5rem;
  bottom: 0.3rem;
}
.musicRun {
  background: url(../img/musicStart.png) no-repeat;
  background-size: cover;
  animation: run 3s;
  -webkit-animation: run 3s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.musicStop {
  background: url(../img/musicStop.png);
  background-size: cover;
}
@keyframes run {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes run {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.progress {
  width: 11.525rem;
  height: 0.65rem;
  border: 2px solid #4091dc;
  border-radius: 0.35rem;
  position: absolute;
  bottom: 2.975rem;
  left: 50%;
  margin-left: -5.775rem;
}
.progress span {
  display: block;
  width: 0;
  height: 0.65rem;
  background: #4091dc;
}
.bg_game {
  width: 100%;
  height: 100%;
  background: url(../img/bg_play2.png);
  background-size: cover;
  position: absolute;
}
.typeBar {
  width: 100%;
  height: 1.825rem;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
}
.typeBar .score {
  width: 6.575rem;
  height: 100%;
  float: left;
  background: url(../img/guai1.png) 0.575rem 0.45rem no-repeat;
  background-size: 1.475rem 1.275rem;
  text-indent: 2.05rem;
  color: #55b9f8;
  line-height: 1.825rem;
  font-size: 0.75rem;
}
.typeBar .time {
  width: 4.5rem;
  height: 100%;
  float: left;
  background: url(../img/time.png) 0 0.4rem no-repeat;
  background-size: 0.975rem 1.125rem;
  font-size: 0.75rem;
  color: #ffe400;
  line-height: 1.825rem;
  text-indent: 1.425rem;
}
